<template>
	<a-card :bordered="false" class="mb-2" v-if="!config.viewFlag">
		<a-row :gutter="10" justify="end">
			<a-col :span="3">
				<a-space>
					<a-button v-if="config.preview == false" type="primary" @click="save">保存</a-button>
					<a-button v-if="config.preview == false" @click="config.preview = true">预览</a-button>
					<a-button v-if="config.preview == true" @click="config.preview = false">退出预览</a-button>
				</a-space>
			</a-col>
		</a-row>
	</a-card>


	<a-row :gutter="10" class="mb-2">
		<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
			<a-card :bordered="false" style="height: calc(77vh)">
				<amisEditor className="is-fixed"  :isMobile="config.isMobile" :preview="config.preview" theme="cxd"
							:value="config.data" :onChange="onChange" :onSave="onSave" :actionOptions="actionOptions">
				</amisEditor>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup>
import {defineComponent, defineProps, getCurrentInstance, nextTick} from "vue";
import 'amis-editor-core/lib/style.css';
import 'amis/lib/themes/cxd.css';
import {applyReactInVue, applyPureReactInVue} from 'veaury'
import {Editor} from 'amis-editor'
import viewConfigApi from '@/api/viewConfig/viewConfigApi.js'

const amisEditor = applyPureReactInVue(Editor);
const props = defineProps(["id"])
const id = ref()
const config = ref({
	isMobile: false,
	preview: true,
	viewFlag: true,
	data: {}
});

const data = ref({});

const {proxy} = getCurrentInstance();

const actionOptions = ref({
	// showOldEntry: false
})


const onChange = (v) => {
	data.value = v;
}


// const fullscreen = () => {
// 	const c = document.querySelector(".ae-Editor");
// 	c.style.position = 'absolute';
// 	const b = document.querySelector(".ae-Editor-inner");
// 	b.style.position = 'absolute';

// }
const save = () => {
	onSave(data.value);
}
onMounted(() => {

	id.value = props.id;
	if (!id.value) {
		id.value = proxy.$route.query.id;
	}
	const viewFlag = proxy.$route?.meta?.viewFlag;
	if (viewFlag != null) {
		config.value.preview = viewFlag;
		config.value.viewFlag = true;
	} else {
		nextTick(() => {
			config.value.preview = false;
			config.value.viewFlag = false;
		})
	}
	const path = proxy.$route?.path;
	if (id.value) {
		queryViewContentById(id.value);
	} else {
		queryViewContentByPath(path.replace("/views", ""));
	}

});
const queryViewContentByPath = async (path) => {
	const cf = await viewConfigApi.getByPath({
		routeUrl: path
	});

	if (cf.viewContent) {
		config.value.data = JSON.parse(cf.viewContent);
	}

}

const queryViewContentById = async (id) => {
	const cf = await viewConfigApi.getById({
		id
	});
	if (!cf) {
		return
	}
	if (cf.viewContent) {
		config.value.data = JSON.parse(cf.viewContent);
	}

}

const onSave = (v) => {
	viewConfigApi.saveViewContent({
		id: id.value,
		viewContent: JSON.stringify(v)
	});
}


</script>

<style scoped>

</style>
